<template>
  <div class="app-app2-container" :class="{ 'qiankun-microapp': isQiankun }">
    <!-- 独立运行时显示的导航 -->
    <div v-if="!isQiankun" class="standalone-header">
      <div class="app-logo">
        <!-- <img src="./assets/logo.png" alt="Logo" class="logo" /> -->
        <span class="app-title">应用二</span>
      </div>
      
      <el-menu
        :default-active="activeRoute"
        mode="horizontal"
        class="standalone-nav"
        router
        background-color="transparent"
      >
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/dashboard">数据仪表盘</el-menu-item>
        <el-menu-item index="/charts">数据图表</el-menu-item>
        <el-menu-item index="/report">数据报表</el-menu-item>
      </el-menu>
      
      <div class="standalone-actions">
        <el-button type="primary" plain icon="Bell" class="action-btn">
          通知
        </el-button>
        <el-avatar size="small" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
      </div>
    </div>

    <!-- 微应用路由视图 -->
    <div class="app-content">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </transition>
      </router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper'

const route = useRoute()

// 是否在qiankun环境中运行
const isQiankun = computed(() => qiankunWindow.__POWERED_BY_QIANKUN__)

// 当前激活的路由
const activeRoute = computed(() => {
  return route.path
})
</script>

<style>
/* 微应用容器基础样式 */
.app-app2-container {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  color: #333;
}

/* 页面过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style> 